<template>
  <!-- 运行报表 -->
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="div1">
          <div class="divIcon">
            <i class="el-icon-wind-power"></i>
          </div>
          <div class="card-panel-description">
            <div>
              <span>任务数量</span>
            </div>
            <div style="line-height: 25px;">
              <span style="font-size: 20px;color: black;">{{ dashboard.jobInfoCount }}</span>
            </div>

            <!-- <hr style="color: white;margin: 5px;"> -->
            <div>
              <span>调度中心运行的任务数量</span>
            </div>
          </div>

        </div>
      </el-col>
      <el-col :span="8">
        <div class="div1">
          <div class="divIcon">
            <i class="el-icon-date"></i>
          </div>
          <div class="card-panel-description">
            <div>
              <span>调度次数</span>
            </div>
            <div style="line-height: 25px;">
              <span style="font-size: 20px;color: black;">{{ dashboard.jobLogCount }}</span>
            </div>
            <!-- <hr style="color: white;margin: 5px;"> -->
            <div>
              <span>调度中心触发的调度次数</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="div1">
          <div class="divIcon">
            <i class="el-icon-s-operation"></i>
          </div>
          <div class="card-panel-description">
            <div>
              <span>执行器数量</span>
              <br />
            </div>
            <div style="line-height: 25px;">
              <span style="font-size: 20px;color: black;">{{ dashboard.executorCount }}</span>
            </div>
            <!-- <hr style="color: white;margin: 5px;"> -->
            <div>
              <span>调度中心在线的执行器数量</span>
              <!-- <span>调度中心在线的执行器机器数量</span> -->
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-card style="margin: 10px 0px;">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :lg="16">
          <div id="echarts_box" style="height:400px;width:100%;"></div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div id="echarts_boxPie" style="height:400px;width:100%;"></div>
        </el-col>
      </el-row>
    </el-card>

  </div>

</template>

<script>
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import { listDashboard } from "@job/api/job/dashboard";
import resize from '@/utils/resize'

export default {
  name: "JobDashboard",
  mixins: [resize],
  data() {
    return {
      dashboard: {},
      dashboardList: {},
      xData: [],
      seriesData: [],
      PieSeriesData: []
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    //饼图
    initChartPie(pieSeriesData) {
      var myChart = echarts.init(document.getElementById('echarts_boxPie'),'light')
      var option = {
        title: {
          text: '成功比例图',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ["成功", "进行中", "失败"]
        },
        series: pieSeriesData
      };

      // 5. 使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    },

    //折线图
    initChart(xData, seriesData) {
      var myChart = echarts.init(document.getElementById('echarts_box'),'light')
      var option = {
        title: {
          text: '日期分布图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        legend: {
          data: ["成功", "进行中", "失败"]
        },
        xAxis: {
          boundaryGap: false,
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: seriesData
      };

      // 5. 使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    },
    // 查询信息
    getList() {
      this.loading = true;
      listDashboard().then(response => {
        let { chart, dashboard } = response.data
        this.dashboardList = chart;
        this.dashboard = dashboard;
        var xData = this.dashboardList.triggerDayList
        var seriesData = [
          {
            name: "成功", type: "line",
            smooth: true, data: this.dashboardList.triggerDayCountSucList,
            animationDuration: 1800,
            animationEasing: 'quadraticOut'
          },
          {
            name: "进行中", type: "line",
            smooth: true, data: this.dashboardList.triggerDayCountRunningList,
            animationDuration: 1800,
            animationEasing: 'cubicInOut'
          },
          {
            name: "失败", type: "line",
            smooth: true, data: this.dashboardList.triggerDayCountFailList,
            animationDuration: 1800,
            animationEasing: 'cubicInOut'
          }
        ]
        var pieSeriesData = [
          {
            type: 'pie',
            name: "执行结果",
            data: [
              { name: "成功", value: this.dashboardList.triggerCountSucTotal },
              { name: "进行中", value: this.dashboardList.triggerCountRunningTotal },
              { name: "失败", value: this.dashboardList.triggerCountFailTotal },
            ]
          }
        ]
        this.$nextTick(() => {
          this.initChart(xData, seriesData);
          this.initChartPie(pieSeriesData);
        })
      }
      );
    },

  }
}
</script>

<style lang="scss" scoped>
.div1 {
  height: 108px;
  min-width: 320px;
  font-size: 12px;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);

  .divIcon {
    font-size: 75px;
    float: left;
    margin: 15px 0px 0px 30px;
    color: #40c9c6;
  }
  .card-panel-description {
    float: right;
    font-weight: bold;
    margin: 22px;
    margin-left: 0px;
  }
  span {
    font-size: 15px;
    color: grey;
  }
}
</style>